<template>
  <div class="aid">
    <div class="base">
      <p>分配
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="分配时间">
          <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" :allowClear="false" v-model="form.DistributeTime" style="width: 100%;"
                         @change="onChange"
          />
        </a-form-model-item>
        <a-form-model-item label="分配人" prop="ReceiverUserID">
          <a-select show-search option-filter-prop="children" :filter-option="filterOption" v-model="form.ReceiverUserID" :allowClear="true">
            <a-select-option v-for="(item, index) in userList" :key="index" :value="item.ID">{{ item.Name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="分配原因" prop="Content">
          <a-input v-model="form.Content" :allowClear="true" type="textarea" :auto-size="{ minRows: 4, maxRows: 6 }"/>
        </a-form-model-item>
        <a-form-model-item label="" :wrapper-col="{ offset: 5 }">
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit">
            确定
          </el-button>
          <el-button size="medium" style="margin-left: 10px;" @click="closeFunction(false)">
            取消
          </el-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
	import {
		addDistribution,
		getDistributiontUser
	} from '@/api/follow'

	export default {
		props: {
			messageID: String,
			followUserID: String
		},
		watch: {
			messageID: function(text) {
				this.form.MessageID = text
				this.form.DistributeTime = this.getNowTime()
			},
			followUserID: function(text) {
				this._getDistributiontUser()
			}
		},
		data() {
			return {
				userList: [],
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				ReceiverUserName: '',
				form: {
					DistributeTime: '',
					ReceiverUserID: '',
					Content: '',
					MessageID: ''
				},
				rules: {
					ReceiverUserID: [{
						required: true,
						message: '请选择分配人',
						trigger: 'blur'
					}],
					Content: [{
						required: true,
						message: '请输入分配原因',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {

		},
		methods: {
			closeFunction(flag) {
				this.$emit('closeFun', flag)
			},
			filterOption(input, option) {
				return (
					option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
				)
      },
			// getNowTime() {
			//     let date = new Date()
			// 		let year = date.getFullYear()
			// 		let month = date.getMonth()
			// 		let day = date.getDate()
			//     this.form.DistributeTime = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
			// },
			getNowTime() {
			    let date = new Date()
					let year = date.getFullYear()
					let month = date.getMonth()
					let day = date.getDate()
			    return `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
			},
			onChange(value, dateString) {
				let beginDate = new Date(this.getNowTime())
				let endDate = new Date(value)
				if (endDate <= beginDate) {
					  this.form.DistributeTime = dateString
						return true
				}
				this.form.DistributeTime = ''
				this.$message.error('分配时间不能超过当前时间')
				return false
			},
			async _getDistributiontUser() {
				let res = await getDistributiontUser({key: ''})
				res.data.data.forEach((item, index) => {
					if (item.ID == this.followUserID) {
						res.data.data.splice(index, 1)
					}
				})
				this.userList = res.data.data
			},
			handleSubmit(e) {
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						delete this.form.time
						let res = await addDistribution(this.form)
						this.$message.success(res.data.msg)
						if (res.data.code === 1) {
							setTimeout(() => {
									this.closeFunction(true)
							}, 1000)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: fixed;
		width: 600px;
		height: 520px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -270px;
		overflow-y: auto;
		border-radius: 8px;
		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;
		.closeCircle{
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
